<template>
    <div>
        <div class="right-box">
            <myTitle title="送/排风机"></myTitle>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div style="margin-top: 10px">
                        <rightEcharts
                            :data="autoData"
                            chatTitle="自动状态"
                            :chartColor="['#5087ec', '#68bbc4']"
                        ></rightEcharts>
                    </div>
                    <div style="margin-top: -20px">
                        <rightEcharts
                            :data="breakdownData"
                            chatTitle="故障状态"
                            :chartColor="['#5087ec', '#68bbc4']"
                        ></rightEcharts>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="margin-top: 10px">
                        <rightEcharts
                            :data="operationData"
                            chatTitle="运行状态"
                            :chartColor="['#5087ec', '#68bbc4']"
                        ></rightEcharts>
                    </div>
                    <div style="margin-top: -20px">
                        <rightEcharts
                            :data="startData"
                            chatTitle="启停状态"
                            :chartColor="['#5087ec', '#68bbc4']"
                        ></rightEcharts>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import myTitle from "../../components/title.vue";
import rightEcharts from "./components/rightEcharts.vue";
import { getPropertyState } from "@/api/sendhttp/baKanban";
import pieJson from "./pie3.json";
export default {
    components: { myTitle, rightEcharts },
    name: "rightBox",
    data() {
        return {
            autoData: [],
            breakdownData: [],
            operationData: [],
            startData: [],
        };
    },
    created() {},
    mounted() {
        this.getCakeData();
    },
    methods: {
        async getCakeData() {
            const {
                data: { code, data, msg },
            } = await getPropertyState({ deviceType: "PF_SPFJ" });
            console.log(pieJson);
            // const { code, data, msg } = pieJson;
            // console.log(data);
            if (code === "200") {
                this.autoData = this.mapData(data, "自动状态");
                this.breakdownData = this.mapData(data, "故障状态");
                this.operationData = this.mapData(data, "运行状态");
                this.startData = this.mapData(data, "启停控制");
            } else {
                this.$message({
                    message: msg,
                    type: "error",
                });
            }
        },
        mapData(data, key) {
            return data[key].map((item) => ({
                value: item.total,
                name: item.name,
            }));
        },
    },
};
</script>
<style lang="scss" scoped>
.right-box {
    height: 400px;
    // background-color: rgba(241, 243, 245, 1);
    // overflow-y: auto;
}
/* @import url(); 引入css类 */
</style>
